<template>
  <div class="car-register">
    <el-card>
      <el-form label-width="120px">
        <el-row type="flex">
          <el-col>
            <el-form-item label="运输任务编号：">
              <el-input placeholder="请输入运输任务编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="起始地机构：">
              <el-select v-model="value" placeholder="请选择起始地机构">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="目的地机构：">
              <el-select v-model="value" placeholder="请选择目的地机构">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col>
            <el-form-item label="回车时间：">
              <el-date-picker
                v-model="backTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                clearable
                style="width: 100%"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="车辆是否可用：">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item>
              <el-button type="primary">搜索</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-table
        :data="transitTruckList"
        stripe
        :header-cell-style="{ background: '#f8faff', color: '#818693' }"
        style="margin: 20px 0"
      >
        <el-table-column prop="id" label="运输任务编号" width="180">
        </el-table-column>
        <el-table-column prop="startAgencyName" label="起始地机构" width="180">
        </el-table-column>
        <el-table-column
          prop="endAgencyName"
          label="目的地机构"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="transportOrderNumber"
          label="运单数量"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="outStorageTime"
          label="出车时间"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="intoStorageTime"
          label="回车时间"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="licensePlate"
          label="车牌号码"
          width="180"
        ></el-table-column>
        <el-table-column prop="workStatus" label="车辆是否可用" width="120">
          <template #default="{ row }">
            <div :class="row.workStatus ? 'green-status' : 'red-status'">
              {{ row.workStatus ? "可用" : "停用" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default>
            <el-button type="text">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getTransitTruckListApi } from "@/api/transit";
export default {
  data() {
    return {
      transitTruckList: [],
      queryInfo: {
        page: 1,
        pageSize: 10,
        // startAgencyId: "",
        // endAgencyId: "",
        // startAgencyName: "", //起始机构名称
        // endAgencyName: "", //接受机构
        // intoStorageStartTime: "", //开始时间
        // intoStorageEndTime: "", // 结束时间,
        // isAvailable: null, //状态
      },
    };
  },
  methods: {
    async getTransitTruckList() {
      const res = await getTransitTruckListApi(this.queryInfo);
      console.log(res);
      this.transitTruckList = res.data.items;
    },
  },
  created() {
    this.getTransitTruckList();
  },
};
</script>

<style lang="less" scoped>
.green-status::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #1dc779;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.red-status::before {
  content: "";
  width: 6px;
  height: 6px;
  background: red;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
</style>
